<template>
  <div class="tags">
    <div class="tag-cloud">
      <div class="tag-cloud-title">目前共计 {{tags.length}} 个标签</div>
      <div class="tag-cloud-tags" :style="'min-height:'+minHeight">
        <li v-for="(tag,index) in tags" :key='index' @click="changeTag(tag.id)" :style='{"font-size": setFontSize(tag), "color":"green"}'>{{tag}}</li>
        
      </div>
    </div>
  </div>
  
  
</template>

<script>
import ArticleScrollPage from "@/components/ArticleScrollPage";
import { getTags } from "@/api/tag";
import axios from 'axios' //新导入
let _this;
export default {
  name: "Tags",
  components: {
    ArticleScrollPage
  },
  data() {
    return {
      moviesArr: [],
      aa: [],
      tags: ['PHP','MySQL','Python','数据库','MongoDB','Oracle','Yii2','web','监控','Url','服务器','Nginx','Centos7','Apache',
      'Linux','Svn','服务','前端','Javascript','排序','冒泡','three.js','设计模式','后端',
      ,'ThinkPHP','Layui','爬虫','多线程','Yii','工作项目','虚拟机','InfluxDB','Composer','内网','Git','Laravel',
      '事务','面试','核心技术','框架','反爬虫','题解','leetcode','Hexo','性能','Docker','Curl','window','Scrapy','代理'],
      params: {
        query: {
          tag_id: 0
        }
      },
      minHeight: 0,
      minCount:0,
      maxCount:60,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      }
    };
  },
  //只是测试
  // created() {
  //   this.getUserList()
  // },
  mounted() {
    _this = this;
    _this.getTagsList();
    _this.minHeight = "350px";
  },
  methods: {
    // async getUserList() {
    //   const {data: res} = await this.$http.get('users',
    //   {
    //     params: this.queryInfo
    //   })
    //   if (res.meta.status !== 200) {
    //     return this.$message.error('获取用户列表失败！')
    //   }
    //   this.userlist = res.data.userlist
    //   this.total = res.data.total
    // },
    setFontSize(tag){
      let maxCount = 60
      let minCount = 0
      let minFontSize = 12
      let maxFontSize = 30
      let spread = maxCount -minCount;

      spread == 0 && spread == 1

      // let size = minFontSize + ( maxCount - minCount ) * ( maxFontSize - minFontSize ) / spread;
      let size = 15
     return size.toFixed(2)+'px';
    },
    setColor(tag){
      let maxCount = 60
      let minCount = 0
      let color = {
        r: 0,
        g: 0,
        b: 0
      }
      let min = minCount;
      let max = maxCount;
      let minHex = parseInt('33', 16);
      let maxHex = parseInt('99', 16);

      // color = getRGB(0,60);
      return '#' + 88;
    },
    getRGB(min, max) {
      // return {
      //   r: min + Math.round(Math.random() * 1000) % (max - min),
      //   g: min + Math.round(Math.random() * 1000) % (max - min),
      //   b: min + Math.round(Math.random() * 1000) % (max - min)
      //   }
    },
    toHex(val) {
      // let maxCount = 60
      // var hex = '00';
      // if(val) {
      //   hex = parseInt(val).toString(16);
      //   if(hex.length == 1) {
      //     hex = '0' + hex;
      //   }
      // }
      // return hex;
    },
    getTagsList() {
      // getTags().then(res => {
      //   _this.tags = res.data.list;
      //   _this.minCount = res.data.minCount;
      //   _this.maxCount = res.data.maxCount;
      // });
    },

    changeTag(id) {
      // _this.$router.push({path: `/tag/${id}`})
    },
    //监听switch开关状态的改变
    // async userStateChanged(userinfo) {
    //   console.log(userinfo)
    //   const{data: res} = await this.$http.put(
    //     `users/${userinfo.id}/state/$
    //     {userinfo.subjects}`
    //   )
    //   if (res.meta.status !== 200) {
    //     userinfo.subjects = !userinfo.subjects
    //     return this.$message.error('更新用户状态失败！')
    //   }
    //   this.$message.success('更新用户状态成功')
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.tags 
  width 65%
  text-align center
  line-height 2
  h2 
    line-height 100px
    color #555
    font-weight 500
  h5
    font-weight 500
    color: #555
  .tag-cloud 
    width 70%
    margin 10% auto
    li
      list-style none
      display inline-block
      margin 10px
      cursor pointer
</style>
